<template>
	<view class="nav">
		<view :style="'height:' + status + 'rpx;' + containerStyle"></view>
		<view v-if="isHome" class="headNav" :style="'height:' + navHeight + 'rpx; '">
			<text class="city">聚分鸟 AT bird</text>
			<navigator class="navigators" url="../../pages/search/index" :style="menuButtonStyle">
				<text class="search-text"></text>
			</navigator>
		</view>
		<view v-else class="navbar" :style="'height:' + navHeight + 'rpx;' + containerStyle">
			<view class="back-icon" @click="backOrHome">
				<image class="back-iconImages" v-if="pages > 1" src="../../static/navbar/ic_back.png"></image>
				<image class="back-iconImages" v-else src="../../static/navbar/ic_home.png"></image>
			</view>
			<view class="nav-title" v-if="titleText">
				<view :style="'height:' + navHeight + 'rpx;line-height:'+ navHeight + 'rpx;' + textStyle">{{titleText}}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, onBeforeMount, reactive, defineProps, defineEmits } from 'vue';

	const props = defineProps({
		background: {
			type: String,
			default: 'rgba(255, 255, 255, 1)'
		},
		color: {
			type: String,
			default: 'rgba(0, 0, 0, 1)'
		},
		fontSize: {
			type: String,
			default: '32'
		},
		iconWidth: {
			type: String,
			default: '116'
		},
		iconHeight: {
			type: String,
			default: '38'
		},
		titleText: {
			type: String,
			default: ''
		},
		isHome: {
			type: Boolean,
			default: false
		}
	});

	const emits = defineEmits(['navBarAttached']);
	// 状态栏高度
	const status = ref(0);
		// 内容高度
	const navHeight = ref(0);
		// 背景颜色
	const containerStyle = ref('');
		// 字体样式
	const textStyle = ref('');
	
	const pages = ref(0);
	const menu = ref(null);
	const menuButtonStyle = ref({});
	
	onBeforeMount(() => {
		setNavSize();
		setStyle();
		emits('navBarAttached', {
			detail: {
				statusHeight: status.value,
				navHeight: navHeight.value,
				navBarHeight: status.value + navHeight.value
			}
		});
	});
	// 计算状态栏高度
	const setNavSize = ()=>{
		const { system, statusBarHeight } = uni.getSystemInfoSync();
		status.value = statusBarHeight * 2;
		navHeight.value = system.indexOf('iOS') > -1 ? 88 * 2 : 96;
		pages.value = getCurrentPages().length;
		// 获取到胶囊的位置
		// #ifdef MP
			// 获取小程序到胶囊的位置
			menu.value = reactive(uni.getMenuButtonBoundingClientRect());
		// #endif
		// 使用短路逻辑短路逻辑来简化条件判断
		// 如果 menu.value 为真，则执行 setMenuButtonStyle()，否则不执行任何操作。以下是优化后的代码：
		menu.value && setMenuButtonStyle();
	}

	const setMenuButtonStyle =()=>{
	// function setMenuButtonStyle() {
		if (menu.value && status.value) {
			const height = menu.value.height * 2 + 'rpx';
			const lineHeight = height;
			const marginTop = (menu.value.top * 2 - status.value) + 'rpx';
			menuButtonStyle.value = {
				height,
				lineHeight,
				marginTop,
				background: '#f4f4f4',
				borderRadius: '200rpx',
				textAlign: 'center'
			};
		}
	}
		// 样式设置
	const setStyle = ()=>{
	    containerStyle.value = { background: props.background };
	    textStyle.value = {  color: props.color,  fontSize: props.fontSize };
	}
	
	// 跳转到搜素
	const backOrHome = () => {
		console.log('c');
		 pages.value > 1 ? uni.navigateBack() : uni.switchTab({ url: '/pages/home/home' });
	}
</script>

<style>
	.nav {
		position: fixed;
		width: 100%;
		top: 0;
		left: 0;
		z-index: 99;
	}
	.back-icon {
		display: flex;
		align-items: center;
		width: 64rpx;
		height: 100%;
		margin-left: 20rpx;
	}

	.back-iconImages{
		width: 64rpx;
		height: 64rpx;
	}
	.navbar {
		position: relative;
	}
	.nav-title {
		position: absolute;
		top: 0;
		left: 50%;
		transform: translate(-50%);
	}
	.headNav {
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		background: linear-gradient(96deg, #D7507A 0%, #4A67A5 100%);
	}
	.city {
		display: inline-block;
		color: #fff;
		position: relative;
		font-size: 30rpx;
		background-size: 40rpx;
	}
	.navigators {
		margin-top: 10rpx;
		width: 94%;
		/* #ifdef H5 */
		    background: #fff;
			height: 70rpx;
			border-radius: 40rpx;
		/* #endif */
			
	}
	
	
	
</style>
